<template>
    <!-- 系统设置 -->
<div class="yh">
    <!-- <div class="gl">角色管理</div> -->
    <div class="select">
   
  <select name="" id="">
    <option value="">用户名</option>
    <option value="">证件号</option>
  </select>

  <input type="text" name="" id="" placeholder="请输入要查找的角色" v-model="lookname" ref='myclear'>
  <button class="but1" @click="lookb()" >查询</button>
  <button class="but2" @click="clear()">重置</button>
  <button class="but3" @click="newadd()"> <span>+</span> 新增</button>
    </div>
 <div>
  <el-table :data="tableData" border style="width: 100%" @mousemove="show">
    <el-table-column label="序号" prop="rid" width="180" />
    <el-table-column label="角色名称" prop="rolename" width="180" />
    <el-table-column label="上级角色" prop="parentrole" width="180" />
    <el-table-column label="菜单权限" prop="rid" width="180" />
    <el-table-column label="数据权限" prop="" width="180" />
    <el-table-column label="操作" prop="userjg" width="180">
        <template #default="scope">
            <!-- <el-button type="primary" :icon="Edit" circle @click="edit(scope.row)"/> -->
            <el-icon @click="edit(scope.row)" v-if='bool'><Edit /></el-icon>
            <el-icon @click="mylook()" v-if='bool'><View /></el-icon>
      </template>
    </el-table-column>
    
  </el-table></div>
  <!-- 新增抽屉组件 -->
   <el-drawer
    v-model="drawer"
    title="新增用户"
    
    :before-close="handleClose"
  >
    <el-form class="from" :v-model="form"  ref="rormref">
       <el-form-item label="序号" prop="rid">
           <el-input v-model="form.rid"  placeholder="请输入序号"/>
       </el-form-item>
       <el-form-item label="角色名称" prop="rolename">
           <el-input v-model="form.rolename"  placeholder="请输入角色名称"/>
       </el-form-item>
       <el-form-item label="上级角色" prop="parentrole">
           <el-input v-model="form.parentrole"  placeholder="请输入上级角色"/>
        
       </el-form-item>
       
       
       <el-form-item prop="">
        <el-button type="primary" @click="addtext1">新增</el-button>
       </el-form-item>
    </el-form>
  </el-drawer>


  <!-- 修改抽屉组件 -->
  <el-drawer
    v-model="drawer1"
    title="修改用户"
    
    :before-close="handleClose1"
  >
    <el-form class="from1" :v-model="form1"  ref="rormref">
       <el-form-item label="序号" prop="rid">
           <el-input v-model="form1.rid"  placeholder="请输入序号"/>
       </el-form-item>
       <el-form-item label="角色名称" prop="rolename">
           <el-input v-model="form1.rolename"  placeholder="请输入角色名称"/>
       </el-form-item>
       <el-form-item label="上级角色" prop="parentrole">
           <el-input v-model="form1.parentrole"  placeholder="请输入上级角色"/>
        
       </el-form-item>
       
       
       <el-form-item prop="">
        <el-button type="primary" @click="emditext">修改</el-button>
       </el-form-item>
    </el-form>
  </el-drawer>
  <!-- 查询弹窗 -->
  <el-dialog v-model="outerVisible" title="查看用户">
    <template #default>
      <div>
        序号：<span>{{ list.arr.rid }}</span><br>
        角色名称：<span>{{ list.arr.rolename }}</span><br>
        上级角色：<span>{{ list.arr.parentrole }}</span><br>
        菜单权限：<span>{{ list.arr.rid }}</span><br>
        数据权限：<span>{{ list.arr.userh }}</span><br>
      
      

      </div>
    </template>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="outerVisible = false">Cancel</el-button>
        
      </div>
    </template>
  </el-dialog>

  <!-- 分页 -->
  <el-pagination
      v-model:current-page="currentPage4"
      v-model:page-size="pageSize4"
      :page-sizes="[10, 20, 30, 40]"
      :small="small"
      :disabled="disabled"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
</div>
</template>

<script setup lang="ts">


// import {
//   Check,
//   Delete,
//   Edit,
//   Message,
//   Search,
//   Star,
// } from '@element-plus/icons-vue'

import { ref,onMounted,reactive } from 'vue'
import service from '@/apis/index'

//  //打开抽屉 回显信息
import { useRouter } from 'vue-router';


var currentPage4=ref()
var pageSize4=ref()
var small=ref()
var disabled=ref()
var background=ref()
var handleSizeChange=ref()
var handleCurrentChange=ref()


//查看列表数据
onMounted(()=>{
  fun()
}
)
async function fun (){
    var res = await service.list.two_list()
    console.log( "查看列表数据",res.data.data);
    tableData.value = res.data.data
   
}
const tableData:any = ref([])

//新增用户
let drawer = ref(false)
let drawer1 = ref(false)
let form:any = reactive({
   rid:'',
   rolename:'',
   parentrole:'',

 })
let newadd = async()=>{
 drawer.value = true

}

let addtext1 = async()=>{
    var res = await service.list.add(form)
    console.log(res.data);
    tableData.value = res.data
    // drawer.value = false;
    fun()
}



//关闭抽屉里时定的回调
let handleClose = ()=>{
    drawer.value = false;
}
let handleClose1 = ()=>{
    drawer1.value = false;
}

//查找用户
const outerVisible = ref(false)
let list:any =reactive({
    arr:[]
})
let lookname = ref('')
let lookb = ()=>{
    outerVisible.value = true
    tableData.value.filter((v:any)=>{
        console.log(v);
        
      if(lookname.value == v.rolename){
        list.arr=v
        
    }
    // console.log(list.arr.username);
    
    // console.log(JSON.parse(JSON.stringify(list.arr))[0]);
})
}
  // 重置 
  let myclear:any = ref(null)
  let clear = ()=>{
   myclear.value.value = ''
   console.log(myclear.value);
   
  }
// 编辑信息

let form1:any = reactive({
   rid:'',
   rolename:'',
   parentrole:'',

 })

let router = useRouter()
let edit = (row:any)=>{
    drawer1.value = true;//显示抽屉
    console.log("回显信息",row);
    form1 = row//回显信息
  //  router.push("/home/systemset/SystembSon")
}
let emditext = ()=>{
//  let ref = await service.list.update(form1.id)
//  console.log("修改的ref",ref);
 drawer1.value = false;
 
}
//删除用户

//眼睛查看
let bool = ref(false)
let mylook = ()=>{
     router.push("/home/systemset/SystembSon")
}
let show  = ()=>{
  bool.value = true
}
</script>

<style scoped>
.yh .gl {
   width: 200px;
   height: 40px;
   line-height: 40px;
   border-radius: 40px;
   color: #fff;
   text-align: center;
   background-color:#409eff ;
   margin-bottom: 20px;
 
}
.yh .select select{
    width: 100px;
    height: 30px;
    padding-left:10px ;
    border-color:#dcd6d6;
    margin:20px 40px 20px 40px;
    background: #fdfbfb;
} 
.yh .select input {
    width: 280px;
    height: 30px;
    padding-left:20px ;
  
    /* margin:20px 40px 20px 40px; */
    background: #fdfbfb;
    border: solid 1px #dcd6d6;

}
.yh .select .but1 {
    width: 60px;
    height: 30px;
    margin:20px 20px 20px 40px;
    background-color: #409eff;
    color: #fff;
    border: none;
    border-radius: 10px;
}
.yh .select .but2 {
    width: 60px;
    height: 30px;
   border-radius: 10px;
    background-color: #fff;
    color: #409eff;
    border: solid 1px #dcd6d6;
}.yh .select {
    position: relative;
}
.yh .select .but3 {
    width: 60px;
    height: 30px;
   border-radius: 10px;
    background-color: #fff;
    color: #409eff;
    border: solid 1px #dcd6d6;
    position: absolute;
    right: 40px;
    
}
.yh .select .but3 span {
    font-size: 20px;
    
}
/* 分页样式 */
.el-pagination {
  margin-top: 20px;
  position: absolute;
  left: 50%;
  transform: translate(-33%, 50%);
}
.el-dialog {
  height: 600px;
}
.el-icon:nth-child(1) {
 font-size: 18px;
  color: #409eff;
  margin-right: 40px;
  
}
.el-icon:nth-child(2) {
  font-size: 18px;
   color: #409eff;
}

</style>